<template>
	<view class="">
		<u-navbar title="华旨尚品" :border-bottom="false" :immersive="true" :is-back="false"  :background="{background:'rgba(0,0,0,0)'}" bgColor='rgba(0,0,0,0)'>  </u-navbar>
		<u-swiper  border-radius='0' height="471" indicator indicatorMode="line" circular :list="lists" @click="click"></u-swiper>
		<view class="contents">
			<!-- 商品分类 -->
			<view class="indexspfl">
				<view class="" v-for="(item,index) in cpfl" :key="index">
					<view class="idfl">
						<image :src="item.image" mode=""></image>
					</view>
					
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 最新产品 -->
			<view class="indexzxcvp">
				<image src="https://s1.ax1x.com/2022/03/30/q2p1BR.png" mode=""></image>
			</view>
			<!-- 最新产品list -->
			<view class="zxcplist">
				<!-- 前三个产品 -->
				<view class="indexq3">
					<!-- 第一个高产品 -->
					<view class="indexqview indexq1">
						<view class="xhc">
							杏花村酒 · X9
						</view>
						<view class="xhc1">
							42%vol 、53%vol
						</view>
						<view class="xhc2">
							新品
						</view>
						<image src="https://s1.ax1x.com/2022/03/25/qtA1zT.png" mode=""></image>
					</view>
					<!-- 右侧两个矮产品 -->
					<view class="indexqview indexq1right">
						<view class="indexq2 ">
							<image src="https://s1.ax1x.com/2022/03/25/qtA1zT.png" mode=""></image>
							<view class="xhj">
								¥ 776
							</view>
							<view class="xhj1">
								42%vol 、53%vol
							</view>
							<view class="xhj2">
								杏花村酒 · 金质8
							</view>
						</view>
						<view class="indexq2">
							<image src="https://s1.ax1x.com/2022/03/25/qtA1zT.png" mode=""></image>
							<view class="xhj">
								¥ 776
							</view>
							<view class="xhj1">
								42%vol 、53%vol
							</view>
							<view class="xhj2">
								杏花村酒 · 金质8
							</view>
						</view>
					</view>
				</view>
				<!-- 下面两个产品 -->
				<view class="_h2">
					<view class="indexq2">
						<image src="https://s1.ax1x.com/2022/03/25/qtA1zT.png" mode=""></image>
						<view class="xhj">
							¥ 776
						</view>
						<view class="xhj1">
							42%vol 、53%vol
						</view>
						<view class="xhj2">
							杏花村酒 · 金质8
						</view>
					</view>
					<view class="indexq2">
						<image src="https://s1.ax1x.com/2022/03/25/qtA1zT.png" mode=""></image>
						<view class="xhj">
							¥ 776
						</view>
						<view class="xhj1">
							42%vol 、53%vol
						</view>
						<view class="xhj2">
							杏花村酒 · 金质8
						</view>
					</view>
				</view>
			</view>
			<!-- 线上充值 -->
			<view class="indexsscx">
				<image src="https://s1.ax1x.com/2022/03/30/q2page.png" mode=""></image>
			</view>
			<!-- 每日精选    •特价好酒 -->
			<view class="indexmrjxtitle">
				<text>每日精选</text> • <text>特价好酒</text>  
			</view>
			<!-- 每日推荐列表 -->
			<view class="indexmrjx">
				<view class="indexmritem" v-for="(item,index) in mrtj" >
					<image :src="item.img" mode=""></image>
					<view class="">
						{{item.name}}
					</view>
					<view class="mrtjflex">
						<text>{{item.jia}}</text>
						<text>{{item.yuanjia}}</text>
					</view>
				</view>
			</view>
			<!-- 首页酒的系列 -->
			<view class="indexjxl">
				<view class="indexjxlitem" v-for="(item,index) in jxl" :key="index">
					<text>{{item.title}}</text>
					<view class="">
						{{item.content}}
					</view>
					<image :src="item.img" mode=""></image>
				</view>
			</view>
			<!-- 首页邀请好友赢好礼 -->
			<view class="yhyyhl">
				<image src="https://s1.ax1x.com/2022/03/30/q29hRO.png" mode=""></image>
			</view>
			<!-- 首页产品列表筛选 -->
			<view class="indexsx">
				<view class="indexsxitem" v-for="(item,index) in sxlx" :class="actives==index ? 'indexcpactiv' :''" @click="active(index)" :key="index">
					<text>
						{{item.title}}
					</text>
					<view class="">
						{{item.ms}}
					</view>
				</view>
			</view>
			<!-- 产品列表 -->
			<view class="cplist">
				<view class="cpitem" v-for="(item,index) in cplist" :key="index">
					<image src="https://s4.ax1x.com/2022/01/30/H9dfMD.jpg" mode=""></image>
					<view class="cptitle">
						{{item.name}}
					</view>
					<view class="cpms">
						{{item.ms}}
					</view>
					<view class="cpjg">
						¥{{item.jia}}
					</view>
					<view class="jia">
						+
					</view>
				</view>
			</view>
		</view>

	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				actives:0,
				lists: [
					{
						image:'https://s1.ax1x.com/2022/03/30/q2SvAP.png',
						urls:""
					},
					{
						image:'https://s1.ax1x.com/2022/03/30/q2SvAP.png',
						urls:""
					},
					{
						image:'https://s1.ax1x.com/2022/03/30/q2SvAP.png',
						urls:""
					}
					
				], //首页产品轮播
				cpfl:[
					{name:"杏花村",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"湄窖系列",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"汾酒系列",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"畅销名酒",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"营养滋补",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"精选茗茶",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"高端红酒",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"会员权益",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"}
				],//首页产品分类
				mrtj:[
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					}
				],//每日推荐好酒
				jxl:[
					{
						title:"汾酒系列",
						content:"清香典范/大国之酿",
						img:"https://s1.ax1x.com/2022/03/30/q29pUx.png"
					},
					{
						title:"汾酒系列",
						content:"清香典范/大国之酿",
						img:"https://s1.ax1x.com/2022/03/30/q2pxbR.png"
					},
					{
						title:"汾酒系列",
						content:"清香典范/大国之酿",
						img:"https://s1.ax1x.com/2022/03/30/q29SV1.png"
					},
					{
						title:"汾酒系列",
						content:"清香典范/大国之酿",
						img:"https://s1.ax1x.com/2022/03/30/q2pjKJ.png"
					},
					
					
				],//首页酒系列
				sxlx:[
					{
						title:"精选",
						ms:"为你推荐"
					},
					{
						title:"白酒",
						ms:"大国之酿"
					},
					{
						title:"红酒",
						ms:"原装进口"
					},
					{
						title:"茗茶",
						ms:"品质保证"
					},
					{
						title:"滋补",
						ms:"营养健康"
					}
				],
				cplist:[
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					}
				],//产品列表
			}
		},
		onLoad() {
			this.getCategory()
		},
		methods: {
				
			click(url) {
				let _this=this
				uni.navigateTo({
					url:_this.list1[url].urls
				})
			},
			// 首页商品列表切换
			active(index){
				let _this=this
				_this.actives=index
			},
			// 获取首页分类
			getCategory() {
				this.$http('category.detail', {
					id: 1
				}).then(res => {
					if (res.code === 1) {
						this.cpfl = res.data.children;
						// this.categoryData = res.data.children;
					}
				});
			},
		}
	}
</script>

<style scoped>
	.indexspfl{
		display: flex;
		flex-wrap: wrap;
		padding-top: 34rpx;
	}
	.indexspfl>view{
		width: 25%;
		text-align: center;
		
	}
	.indexspfl>view>view{
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}
	.idfl>image{
		width: 67rpx ;
		height: 86rpx;
	}
	.idfl{
		margin: 30rpx auto 9rpx;
		width: 120rpx;
		height: 120rpx;
		background: #F8F9FD;
		border-radius: 10rpx;
	}
	.indexzxcvp{
		height: 100%;
		height:328rpx;
		max-height: 328rpx;
		margin: 59rpx 0 40rpx;
	}
	.indexzxcvp>image{
		width: 100%;
		max-height: 100%;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
	.indexsscx{
		height: 100%;
		height:200rpx;
		max-height: 200rpx;
		margin: 50rpx 0 59rpx;
	}
	.indexsscx>image{
		width: 100%;
		max-height: 100%;	
		border-radius: 10rpx;
	}
	.indexmrjxtitle>text:first-of-type{
		font-size: 36prx;
		font-weight: 550;
		color: #333333;
		margin-right: 30rpx;
	}
	.indexmrjxtitle>text:last-of-type{
		font-size: 30prx;
		color: #333333;
		font-weight: 400;
		margin-left: 30rpx;
	}
	.indexmrjxtitle{
		margin-bottom: 40rpx;
	}
	.indexmrjx{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding:40rpx 50rpx;
		/* width: calc(100% - 100rpx); */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.indexmritem{
		text-align: center;
		margin-bottom: 50rpx;
		width: 28%;
	}
	.indexmritem>image{
		width: 144rpx;
		height: 153rpx;
	}
	.mrtjflex{
		display: flex;
		justify-content: space-between;
	}
	.indexmritem>view:first-of-type{
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		margin: 20rpx 0 18rpx;
	}
	.mrtjflex>text:first-of-type{
		font-size: 20rpx;
		font-weight: 400;
		color: #7C7C7C;
		text-decoration: line-through;
	}
	.mrtjflex>text:last-of-type{
		font-size: 24rpx;
		font-weight: bold;
		color: #FF9A33;
	}
	.indexjxl{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 34rpx;
		margin-bottom: 40rpx;
		padding: 30rpx 20rpx 40rpx;
		/* width: calc(100% - 40rpx); */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.indexjxlitem image{
		width: 330rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.indexjxlitem>text{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.indexjxlitem>view{
		font-size: 20rpx;
		font-weight: 500;
		color: #7C7C7C;
		margin: 15rpx 0 16rpx;
	}
	.yhyyhl{
		width: 100%;
		height: 130rpx;		border-radius: 30rpx;
		margin-bottom: 56rpx;
		overflow: hidden;
	}
	.yhyyhl>image{
		width: 100%;
		height: 100%;;
	}
	.indexsx{
		padding: 0 20rpx;
		/* width: calc(100% -40rpx); */
		display: flex;
		justify-content: space-between;
	}
	.indexsxitem>text{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 12rpx;
		display: block;
		text-align: center;
	}
	.indexsxitem>view{
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #7C7C7C;
		width: 108rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}
	.indexcpactiv>view{
		width: 108rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		background: #FF9A33;
		border-radius: 15rpx;
		color: #FFFFFF;
	}
	.cplist{
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cpitem{
		text-align: center;
		background: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 35rpx;
		padding: 45rpx 20rpx 40rpx;
		width: 48%;
	}
	.cpitem>view{
		text-align: left;
	}
	.jia{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 70rpx;
		text-align: center !important;
		line-height: 44rpx;
		color: #FF9A33;
		height: 44rpx;
		border: 1rpx solid #FF9A33;
		border-radius: 30rpx 0rpx 10rpx 0rpx;
	}
	.cpitem>image{
		width: 182rpx;
		height: 231rpx;
	}
	.cptitle{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin: 77rpx 0 29rpx;
	}
	.cpms{
		font-size: 24rpx;
		font-weight: 500;
		color: #7C7C7C;
		margin: 29rpx 0 40rpx;
	}
	.cpjg{
		font-size: 24rpx;
		font-weight: 800;
		color: #FF9A33;
	}
	.indexq3{
		display: flex;
		justify-content: space-between;
				margin-bottom: 30rpx;
	}
	.indexqview{
		width: 330rpx;;
	}
	.indexq1{
		/* width: calc(330rpx - 50rpx); */
		padding: 20rpx 25rpx 0 25rpx;
		background: #EBF4FD;
		position: relative;
		border-radius: 10rpx;
	}
	.indexq1 image{
		width: 281rpx;
		height: 330rpx;
		position: absolute;
		bottom: 0;
	}
	._h2{
		display: flex;
		justify-content: space-between;
	}
	.indexq2{
		padding: 112rpx 20rpx 20rpx 0;
		/* width: calc(330rpx - 20rpx); */
		text-align: right;
		position: relative;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
	.indexq2>image{
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		width: 113rpx;
		height: 142rpx;
	}
	.xhc{
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
	}
	.xhc1{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 19rpx 0 10rpx;
	}
	.xhc2{
		width: 70rpx;
		text-align: center;
		height: 40rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FF9A33;
		line-height: 40rpx;
		border: 1rpx solid #FF9A33;
		border-radius: 4rpx;
	}
	.xhj{
		font-size: 30rpx;
		font-weight: 800;
		color: #FF9A33;
	}
	.xhj1{
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
	}
	.xhj2{
		font-size: 26rpx;
		font-weight: 800;
		color: #333333;
		margin: 20rpx 0 13rpx;
	}
	.indexq1right>.indexq2:last-of-type{
		margin-bottom: 0;
	}
</style>
